{{>layout/header}}

{{>modals/create-instance-modal}}

<div class="row">

    <div class="col-md-12 mb-2">

        <button type="button" class="btn btn-primary float-right" data-toggle="modal"
                data-target="#createInstanceModal">
            New Instance
        </button>

    </div>

    <div class="col-md-2">

        <table class="table table-striped">
            {{#process}}
            <tr>
                <th>Key</th>
                <td>{{processDefinitionKey}}</td>
            </tr>
            <tr>
                <th>BPMN process id</th>
                <td>{{bpmnProcessId}}</td>
            </tr>
            <tr>
                <th>Version</th>
                <td>{{version}}</td>
            </tr>
            <tr>
                <th># active</th>
                <td>{{countRunning}}</td>
            </tr>
            <tr>
                <th># ended</th>
                <td>{{countEnded}}</td>
            </tr>
            <tr>
                <th>BPMN file</th>
                <td><a id="bpmnDownloadLink" onclick="onBpmnDownloadClicked();" style="cursor: pointer" download="{{bpmnProcessId}}-v{{version}}.bpmn">&#x2913; download</a></td>
            </tr>
            {{/process}}
        </table>

    </div>

    <div class="col-md-10">
        {{>components/bpmn-diagram}}
    </div>

    <div class="col-md-12">

        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-instances" role="tab"
                   aria-controls="nav-home" aria-selected="true">Instances</a>
                <a class="nav-item nav-link" id="nav-message-subscriptions-tab" data-toggle="tab"
                   href="#nav-message-subscriptions"
                   role="tab" aria-controls="nav-contact" aria-selected="false">Message Subscriptions</a>
                <a class="nav-item nav-link" id="nav-timers-tab" data-toggle="tab" href="#nav-timers" role="tab"
                   aria-controls="nav-contact" aria-selected="false">Timers</a>
            </div>
        </nav>
        <div class="tab-content" id="nav-tabContent" style="height:200px;">
            <div class="tab-pane fade show active" id="nav-instances" role="tabpanel" aria-labelledby="nav-home-tab">
                {{>instance-list}}
            </div>
            <div class="tab-pane fade" id="nav-message-subscriptions" role="tabpanel" aria-labelledby="nav-contact-tab">
                {{>process-message-subscription-list}}
            </div>
            <div class="tab-pane fade" id="nav-timers" role="tabpanel" aria-labelledby="nav-contact-tab">
                {{>process-timer-list}}
            </div>

        </div>

    </div>
</div>

{{>layout/footer}}

<script>
    $(document).ready(function () {
        subscribeForProcessDefinition({{process.processDefinitionKey}});
    });

</script>
